﻿@using MyCompanyName.AbpZeroTemplate.Authorization
@using MyCompanyName.AbpZeroTemplate.Web.Areas.AppAreaName.Startup
@{
    ViewBag.CurrentPageName = AppAreaNamePageNames.Common.OrganizationUnits;
}

@section Styles
{
    <link rel="stylesheet" abp-href="/view-resources/Areas/AppAreaName/Views/OrganizationUnits/Index.css" asp-append-version="true"/>
}

@section Scripts
{
    <script abp-src="/view-resources/Areas/AppAreaName/Views/OrganizationUnits/Index.js" asp-append-version="true"></script>
}

<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <abp-page-subheader title="@L("OrganizationUnits")" description="@L("OrganizationUnitsHeaderInfo")"></abp-page-subheader>

    <div class="@(await GetContainerClass())">
        <div class="row">
            <div class="col">
                <div class="card card-custom card-stretch" id="ouCard">
                    <div class="card-header align-items-center mt-4">
                        <h3 class="card-title align-items-start flex-column">
                            <span class="font-weight-bolder text-dark">@L("OrganizationTree")</span>
                        </h3>
                        <div class="card-toolbar">
                            @if (IsGranted(AppPermissions.Pages_Administration_OrganizationUnits_ManageOrganizationTree))
                            {
                                <button type="button" id="AddRootUnitButton" class="btn btn-primary">
                                    <i class="la la-plus"></i> @L("AddRootUnit")
                                </button>
                            }
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="card-scroll">
                            <div id="OrganizationUnitEditTree"></div>
                            <div id="OrganizationUnitTreeEmptyInfo" ng-if="!vm.organizationTree.unitCount" class="text-muted">
                                @L("NoOrganizationUnitDefinedYet")
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card card-custom card-stretch" id="ouMembersCard">
                    <div class="card-header align-items-center mt-4">
                        <h3 class="card-title align-items-start flex-column">
                            <span class="font-weight-bolder text-dark" id="SelectedOuRightTitle"></span>
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="card-scroll">
                            <div id="SettingsTabPanel" class="tabbable-line">
                                <ul class="nav nav-tabs" role="tablist">
                                    <li class="nav-item">
                                        <a href="#MembersTab" aria-expanded="true" class="nav-link active" data-toggle="tab" role="tab">
                                            @L("Members")
                                        </a>
                                    </li>

                                    <li class="nav-item">
                                        <a href="#RolesTab" aria-expanded="true" class="nav-link" data-toggle="tab" role="tab">
                                            @L("Roles")
                                        </a>
                                    </li>
                                </ul>

                                <div class="tab-content">
                                    <div class="tab-pane pt-5 active" id="MembersTab">
                                        @if (IsGranted(AppPermissions.Pages_Administration_OrganizationUnits_ManageMembers))
                                        {
                                            <button type="button" id="AddUserToOuButton" class="btn btn-primary float-right m-3" style="display: none">
                                                <i class="la la-plus"></i> @L("AddMember")
                                            </button>
                                        }
                                        <div id="OuMembersTable" style="display: none">
                                            <table class="organization-members-table display table table-separate table-head-custom no-footer dtr-inline dt-responsive nowrap">
                                                <thead>
                                                <tr>
                                                    <th>@L("Delete")</th>
                                                    <th>@L("UserName")</th>
                                                    <th>@L("AddedTime")</th>
                                                </tr>
                                                </thead>
                                            </table>
                                        </div>

                                        <div id="OuMembersEmptyInfo" class="text-muted mt-4">
                                            @L("SelectAnOrganizationUnitToSeeMembers")
                                        </div>
                                    </div>

                                    <div class="tab-pane pt-5" id="RolesTab">
                                        @if (IsGranted(AppPermissions.Pages_Administration_OrganizationUnits_ManageRoles))
                                        {
                                            <button type="button" id="AddRoleToOuButton" class="btn btn-primary float-right m-3" style="display: none">
                                                <i class="la la-plus"></i> @L("AddRole")
                                            </button>
                                        }
                                        <div id="OuRolesTable" style="display: none">
                                            <table class="organization-roles-table display table table-separate table-head-custom no-footer dtr-inline dt-responsive nowrap">
                                                <thead>
                                                <tr>
                                                    <th>@L("Delete")</th>
                                                    <th>@L("RoleName")</th>
                                                    <th>@L("AddedTime")</th>
                                                </tr>
                                                </thead>
                                            </table>
                                        </div>

                                        <div id="OuRolesEmptyInfo" class="text-muted mt-4">
                                            @L("SelectAnOrganizationUnitToSeeRoles")
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
